<template>
  <div class="example">
    <div class="part">
      <div class="title">
        <span class="number">1</span>
        <span class="name titleName">{{$t('CBIAPI.pageTitle.PCActivationAPI.title')}}</span>
      </div>
      <div class="cont">{{$t('CBIAPI.pageTitle.PCActivationAPI.title1')}}</div>
    </div>
    <div class="part">
      <div class="title">
        <span class="number">1.1</span>
        <span class="name">{{$t('CBIAPI.Request')}}</span>
      </div>
      <div class="table1">
        <el-table
          :data="tableData1"
          border>
          <el-table-column
            prop="date"
            :label="$t('CBIAPI.table.column1')"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            :label="$t('CBIAPI.table.column2')"
            width="260">
          </el-table-column>
          <el-table-column
            prop="type"
            :label="$t('CBIAPI.table.column3')"
            width="180">
          </el-table-column>
          <el-table-column
            prop="mo"
            :label="$t('CBIAPI.table.column4')"
            width="260">
          </el-table-column>
          <el-table-column
            prop="note"
            :label="$t('CBIAPI.table.column5')"
            width="260">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="part">
      <div class="title">
        <span class="number">1.2</span>
        <span class="name">{{$t('CBIAPI.Response')}}</span>
      </div>
      <div class="table2">
        <el-table
          :data="tableData2"
          border>
          <el-table-column
            prop="date"
            :label="$t('CBIAPI.table.column1')"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            :label="$t('CBIAPI.table.column2')"
            width="260">
          </el-table-column>
          <el-table-column
            prop="type"
            :label="$t('CBIAPI.table.column3')"
            width="180">
          </el-table-column>
          <el-table-column
            prop="note"
            :label="$t('CBIAPI.table.column5')">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="part">
      <div class="title">
        <span class="number">1.3</span>
        <span class="name">{{$t('CBIAPI.SampleRequest')}}</span>
      </div>
      <div class="cont">{{$t('CBIAPI.Authorization')}}</div>
      <div class="json">
        <div style="margin:5px 0;">
          <span>{{jsonRequest.type}}:&nbsp;&nbsp;</span>
          <span class="url">{{jsonRequest.url}}</span>
        </div>
        <div>
          <span>Content-Type:</span>
          <span>{{jsonRequest.contentType}}</span>
        </div>
        <pre>{{jsonRequest.data}}</pre>
      </div>
    </div>
    <div class="part">
      <div class="title">
        <span class="number">1.4</span>
        <span class="name">{{$t('CBIAPI.SampleResponse')}}</span>
      </div>
      <div class="cont">{{$t('CBIAPI.ResponseJSON')}}</div>
      <div class="json">
        <pre>{{jsonResponse.data}}</pre>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Example",
    data() {
      return {
        tableData1: [{
          date: 'appKey',
          name: '/appKey',
          type: 'vchar',
          mo: 'Optional',
          note: ''
        }, {
          date: 'secret',
          name: '/secret',
          type: 'vchar',
          mo: 'Optional',
          note: ''
        }, {
          date: '_timestamp',
          name: '/_timestamp',
          type: 'timestamp',
          mo: 'Optional',
          note: ''
        }, {
          date: 'sign',
          name: '/sign',
          type: 'vchar',
          mo: 'Optional',
          note: ''
        }, {
          date: 'prod_machine_type',
          name: '/prod_machine_type',
          type: 'vchar',
          mo: 'Optional',
          note: ''
        }, {
          date: 'warranty_start_month',
          name: '/warranty_start_month',
          type: 'vchar',
          mo: 'Optional',
          note: ''
        }, {
          date: 'page',
          name: '/page',
          type: 'vchar',
          mo: 'Optional',
          note: ''
        }],
        tableData2: [{
          date: 'httpStatusCode',
          name: '/status',
          type: 'String',
          note: 'Default 200/400'
        }, {
          date: 'httpMessage',
          name: '/msg',
          type: 'String',
          note: 'Default  success/error'
        }, {
          date: 'dataSize',
          name: '/data/total',
          type: 'Integer',
          note: 'Default'
        }, {
          date: 'pageNumber',
          name: '/data/page',
          type: 'Integer',
          note: 'Default pageSize:100'
        }, {
          date: 'mtmsbomData',
          name: '/data/data[]',
          type: 'jsonarray',
          note: 'mtmsbomData'
        }],
        jsonRequest: {
          type: 'POST',
          url: 'https://soa-test.lenovo.com/t1/api/pc_activition/v1.0/api/getMtmSbomData HTTP/1.1',
          contentType: 'application/json',
          data: {
            "appKey": "cbi_public_certification",
            "secret": "85699AC56E0A7D6730849FC1563EE0C7",
            "_timestamp": "1532423927890",
            "sign": "A87F84874C3329580672419CC5D391A9",
            "prod_machine_type": "6173",
            "warranty_start_month": "201611",
            "page": "1"
          }
        },
        jsonResponse: {
          data: {
            "status": 200,
            "msg": "success",
            "data": {
              "total": 126,
              "page": 1,
              "data": [
                {
                  "wty_coverage_start_date": "20161102",
                  "prod_build_date": "20161031",
                  "prod_ship_date": "20161101",
                  "prod_series": "77X2SHT",
                  "source": "ibase",
                  "sold_to_name": "ALSO Schweiz AG",
                  "ship_to_name": "ALSO SCHWEIZ AG",
                  "wty_coverage_end_date": "20191216",
                  "prod_material": "61732UL",
                  "ship_to_id": "1213063824",
                  "prod_activation_flag": "",
                  "prod_activation_date": "",
                  "prod_brand_name": "STORAGE",
                  "sales_geography": "EMEA",
                  "sales_market": "SWITZERLAND",
                  "prod_subser_name": "Storage Tape Products",
                  "prod_machine_type": "6173",
                  "ship_to_country": "CH",
                  "prod_activation_country": "",
                  "prod_activation_source": "",
                  "prod_material_desc": "Storage TS3100 TapeLibraryModel L2U",
                  "prod_bh_series": "OPTION",
                  "qty": 1,
                  "prod_series_name": "Tape Series",
                  "sales_territory": "DACH",
                  "sold_to_id": "1213063824"
                },
              ]
            }
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .example{
    margin: 10px 41px 0 41px;
    .part{
      margin: 30px 0;
      .title{
        margin:10px;
        font-weight: bold;
        .number{
          font-size: 20px;
          color: #0090e9;
          margin-right: 10px;
        }
        .name{
          font-size: 20px;
          color: #000;
        }
        .titleName{
          font-size: 24px;
        }
      }
      .cont{
        font-size: 16px;
        line-height:24px;
      }
      .json{
        .url{
          color:#0090e9;
          /*cursor: pointer;*/
        }
        /*.url:hover{*/
        /*text-decoration: underline;*/
        /*}*/
      }
      .table1{
        width:1142px;
      }
      .table2{
        width:880px;
      }
    }
  }

</style>
